<template>
  <div>
    <el-form :model="health">
      <el-row>
        <el-col :span="24">
          <el-form-item label="是否有以下病史" size="large">
            <el-checkbox-group v-model="health.disease">
              <el-checkbox label="癫痫病" />
              <el-checkbox label="先天心脏病" />
              <el-checkbox label="严重哮喘" />
              <el-checkbox label="严重皮肤病" />
              <el-checkbox label="高血压" />
              <el-checkbox label="乙肝病毒" />
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="有无过敏史" size="large">
            <el-switch v-model="health.allergic" active-text="是" inactive-text="否" />
          </el-form-item>
        </el-col>
        <el-col :span="16" v-show="health.allergic">
          <el-form-item label="过敏内容" size="large">
            <el-input v-model="health.allergicInfo" :rows="1" type="textarea" placeholder="Please input" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="需要特殊说明的情况" size="large">
            <el-switch v-model="health.specialSituation" active-text="是" inactive-text="否" />
          </el-form-item>
        </el-col>
        <el-col :span="16" v-show="health.specialSituation">
          <el-form-item label="说明内容" size="large">
            <el-input v-model="health.specialSituationInfo" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="有无发热，呼吸道症状（干咳，鼻塞，流涕，咽痛）等症状？" size="large">
            <el-switch v-model="health.fever" active-text="是" inactive-text="否" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="14天内本人或共同居住的家属有无境外旅居史、高中风险地区旅居史?" size="large">
            <el-switch v-model="health.highRiskTravel" active-text="是" inactive-text="否" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="14天内有无接触境外史或高中风险地区发热或者呼吸道患者?" size="large">
            <el-switch v-model="health.contact" active-text="是" inactive-text="否" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-button type="primary" @click="postHealth">提交</el-button>
  </div>
</template>

<script setup>
import { reactive, ref, getCurrentInstance } from 'vue';

const health = reactive({
  diseaseGotten: false,
  disease: [],
  allergic: false,
  allergicInfo: '',
  specialSituation: false,
  specialSituationInfo: '',
  fever: false,
  highRiskTravel: false,
  contact: false,
});

const { proxy } = getCurrentInstance()
const baseURL = "http://localhost:8080/"
const postHealth = function () {
  proxy.$axios.post(baseURL + '/health', health)
    .then(function (response) {
      const { data: res } = response
      console.log(res)
    });
}

/* defineExpose({
  health
}) */
</script>

<script>
export default {
  name: 'Health'
}
</script>

<style scoped>

</style>